<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>数组的迭代方法 | 皮卡车</title>
    <meta name="description" content="皮卡车的文档, vuepress 文档">
    <meta name="generator" content="VuePress 1.3.1">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="icon" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="google-site-verification" content="Ld_AEWr30siza2LmmZ12csitRGsSj9gqqEAch0UXkTc">
    
    <link rel="preload" href="/assets/css/0.styles.1a6a4f51.css" as="style"><link rel="preload" href="/assets/js/app.1f0f93c9.js" as="script"><link rel="preload" href="/assets/js/2.f28f3227.js" as="script"><link rel="preload" href="/assets/js/35.5d9dfab1.js" as="script"><link rel="preload" href="/assets/js/3.a7eaa85f.js" as="script"><link rel="prefetch" href="/assets/js/10.7b76d38f.js"><link rel="prefetch" href="/assets/js/100.0d62a3f6.js"><link rel="prefetch" href="/assets/js/101.4916ac0c.js"><link rel="prefetch" href="/assets/js/102.0ee21f66.js"><link rel="prefetch" href="/assets/js/103.872c594c.js"><link rel="prefetch" href="/assets/js/104.0bff815e.js"><link rel="prefetch" href="/assets/js/105.46330c43.js"><link rel="prefetch" href="/assets/js/106.4ad211ca.js"><link rel="prefetch" href="/assets/js/107.d9011871.js"><link rel="prefetch" href="/assets/js/108.bab8ed0e.js"><link rel="prefetch" href="/assets/js/109.b7e4a790.js"><link rel="prefetch" href="/assets/js/11.518e0dbb.js"><link rel="prefetch" href="/assets/js/110.1eb492e8.js"><link rel="prefetch" href="/assets/js/111.ee6a2e31.js"><link rel="prefetch" href="/assets/js/112.05d655c6.js"><link rel="prefetch" href="/assets/js/113.0a4cf8f0.js"><link rel="prefetch" href="/assets/js/114.ef783947.js"><link rel="prefetch" href="/assets/js/115.11bbdb9c.js"><link rel="prefetch" href="/assets/js/116.5646126d.js"><link rel="prefetch" href="/assets/js/117.854d26bf.js"><link rel="prefetch" href="/assets/js/118.1e514b13.js"><link rel="prefetch" href="/assets/js/119.aa944f45.js"><link rel="prefetch" href="/assets/js/12.511e3547.js"><link rel="prefetch" href="/assets/js/120.1c6f450c.js"><link rel="prefetch" href="/assets/js/121.44f16ee6.js"><link rel="prefetch" href="/assets/js/122.f877b8e8.js"><link rel="prefetch" href="/assets/js/123.0563fdd5.js"><link rel="prefetch" href="/assets/js/124.4cd97316.js"><link rel="prefetch" href="/assets/js/125.a502f4ee.js"><link rel="prefetch" href="/assets/js/126.c7e94093.js"><link rel="prefetch" href="/assets/js/127.bd8aed7f.js"><link rel="prefetch" href="/assets/js/128.66063cc3.js"><link rel="prefetch" href="/assets/js/129.21bb1073.js"><link rel="prefetch" href="/assets/js/13.9e5bee4e.js"><link rel="prefetch" href="/assets/js/130.c8edfccb.js"><link rel="prefetch" href="/assets/js/131.7a1f29be.js"><link rel="prefetch" href="/assets/js/132.f589fc06.js"><link rel="prefetch" href="/assets/js/133.55ac5c9a.js"><link rel="prefetch" href="/assets/js/134.eeab127b.js"><link rel="prefetch" href="/assets/js/135.5a1571dd.js"><link rel="prefetch" href="/assets/js/136.b72b4d1c.js"><link rel="prefetch" href="/assets/js/137.678e022a.js"><link rel="prefetch" href="/assets/js/138.ba4108fa.js"><link rel="prefetch" href="/assets/js/139.0b02b599.js"><link rel="prefetch" href="/assets/js/14.b9ec07e6.js"><link rel="prefetch" href="/assets/js/140.690e4e4c.js"><link rel="prefetch" href="/assets/js/141.709da4ed.js"><link rel="prefetch" href="/assets/js/142.f2de76c0.js"><link rel="prefetch" href="/assets/js/143.4dcb17f0.js"><link rel="prefetch" href="/assets/js/144.730ef429.js"><link rel="prefetch" href="/assets/js/145.d881c754.js"><link rel="prefetch" href="/assets/js/146.f3379a41.js"><link rel="prefetch" href="/assets/js/147.eeb9ca6f.js"><link rel="prefetch" href="/assets/js/148.bb6020cd.js"><link rel="prefetch" href="/assets/js/149.1d34dea6.js"><link rel="prefetch" href="/assets/js/15.d0fa1a9d.js"><link rel="prefetch" href="/assets/js/150.599238ba.js"><link rel="prefetch" href="/assets/js/151.9655268f.js"><link rel="prefetch" href="/assets/js/152.1f843fa4.js"><link rel="prefetch" href="/assets/js/153.7af45ca6.js"><link rel="prefetch" href="/assets/js/154.eff93a56.js"><link rel="prefetch" href="/assets/js/155.ff07fba4.js"><link rel="prefetch" href="/assets/js/156.1b1814b7.js"><link rel="prefetch" href="/assets/js/157.8ac4c21b.js"><link rel="prefetch" href="/assets/js/158.aa8a0124.js"><link rel="prefetch" href="/assets/js/159.d61fdb37.js"><link rel="prefetch" href="/assets/js/16.ccd2bd60.js"><link rel="prefetch" href="/assets/js/17.ddc8fde4.js"><link rel="prefetch" href="/assets/js/18.a06e60cc.js"><link rel="prefetch" href="/assets/js/19.64b3dec9.js"><link rel="prefetch" href="/assets/js/20.3615e182.js"><link rel="prefetch" href="/assets/js/21.0c654d53.js"><link rel="prefetch" href="/assets/js/22.720aac8f.js"><link rel="prefetch" href="/assets/js/23.0dc53b91.js"><link rel="prefetch" href="/assets/js/24.d4b75b0e.js"><link rel="prefetch" href="/assets/js/25.9120702e.js"><link rel="prefetch" href="/assets/js/26.b24d89e2.js"><link rel="prefetch" href="/assets/js/27.55df94ab.js"><link rel="prefetch" href="/assets/js/28.250c68a5.js"><link rel="prefetch" href="/assets/js/29.75a3c8f3.js"><link rel="prefetch" href="/assets/js/30.8cdc2fcd.js"><link rel="prefetch" href="/assets/js/31.45303d68.js"><link rel="prefetch" href="/assets/js/32.f4225739.js"><link rel="prefetch" href="/assets/js/33.15b21267.js"><link rel="prefetch" href="/assets/js/34.5baca30b.js"><link rel="prefetch" href="/assets/js/36.981eadca.js"><link rel="prefetch" href="/assets/js/37.cead7f6b.js"><link rel="prefetch" href="/assets/js/38.ee6bcaf1.js"><link rel="prefetch" href="/assets/js/39.e7579788.js"><link rel="prefetch" href="/assets/js/4.494c614b.js"><link rel="prefetch" href="/assets/js/40.01d2b30b.js"><link rel="prefetch" href="/assets/js/41.19cf06ce.js"><link rel="prefetch" href="/assets/js/42.15941cde.js"><link rel="prefetch" href="/assets/js/43.66adb73c.js"><link rel="prefetch" href="/assets/js/44.8d99ed62.js"><link rel="prefetch" href="/assets/js/45.12ea9159.js"><link rel="prefetch" href="/assets/js/46.644efa88.js"><link rel="prefetch" href="/assets/js/47.531131c7.js"><link rel="prefetch" href="/assets/js/48.b214f000.js"><link rel="prefetch" href="/assets/js/49.e42d4b72.js"><link rel="prefetch" href="/assets/js/5.7e277dc8.js"><link rel="prefetch" href="/assets/js/50.de0aa85c.js"><link rel="prefetch" href="/assets/js/51.8be2974c.js"><link rel="prefetch" href="/assets/js/52.cc067888.js"><link rel="prefetch" href="/assets/js/53.4ceb2c6b.js"><link rel="prefetch" href="/assets/js/54.b2647058.js"><link rel="prefetch" href="/assets/js/55.dc3df953.js"><link rel="prefetch" href="/assets/js/56.921a6934.js"><link rel="prefetch" href="/assets/js/57.1e24b1fd.js"><link rel="prefetch" href="/assets/js/58.f4e8ebac.js"><link rel="prefetch" href="/assets/js/59.17ab117b.js"><link rel="prefetch" href="/assets/js/6.4014218f.js"><link rel="prefetch" href="/assets/js/60.352cea9b.js"><link rel="prefetch" href="/assets/js/61.77289388.js"><link rel="prefetch" href="/assets/js/62.ec0ed919.js"><link rel="prefetch" href="/assets/js/63.c75dcb25.js"><link rel="prefetch" href="/assets/js/64.59d15a75.js"><link rel="prefetch" href="/assets/js/65.7e5a14bb.js"><link rel="prefetch" href="/assets/js/66.4e770ba1.js"><link rel="prefetch" href="/assets/js/67.0742f21a.js"><link rel="prefetch" href="/assets/js/68.a6ed34fd.js"><link rel="prefetch" href="/assets/js/69.48c9a47f.js"><link rel="prefetch" href="/assets/js/7.c5ecd7d3.js"><link rel="prefetch" href="/assets/js/70.eb477192.js"><link rel="prefetch" href="/assets/js/71.1be57009.js"><link rel="prefetch" href="/assets/js/72.6859561c.js"><link rel="prefetch" href="/assets/js/73.aae65018.js"><link rel="prefetch" href="/assets/js/74.59d76d34.js"><link rel="prefetch" href="/assets/js/75.04e23427.js"><link rel="prefetch" href="/assets/js/76.74d6eb6a.js"><link rel="prefetch" href="/assets/js/77.fba76057.js"><link rel="prefetch" href="/assets/js/78.0da94b25.js"><link rel="prefetch" href="/assets/js/79.14676976.js"><link rel="prefetch" href="/assets/js/8.08c85334.js"><link rel="prefetch" href="/assets/js/80.7494721f.js"><link rel="prefetch" href="/assets/js/81.f04f6229.js"><link rel="prefetch" href="/assets/js/82.e4c6f74b.js"><link rel="prefetch" href="/assets/js/83.81ad8dbf.js"><link rel="prefetch" href="/assets/js/84.d28e4a3d.js"><link rel="prefetch" href="/assets/js/85.d99fa7fa.js"><link rel="prefetch" href="/assets/js/86.597ecadb.js"><link rel="prefetch" href="/assets/js/87.e6d21734.js"><link rel="prefetch" href="/assets/js/88.b43a52d4.js"><link rel="prefetch" href="/assets/js/89.a5ba287d.js"><link rel="prefetch" href="/assets/js/9.658cd6b3.js"><link rel="prefetch" href="/assets/js/90.c253df12.js"><link rel="prefetch" href="/assets/js/91.8946a93d.js"><link rel="prefetch" href="/assets/js/92.8b8f1ae0.js"><link rel="prefetch" href="/assets/js/93.aa73c784.js"><link rel="prefetch" href="/assets/js/94.9326bcc7.js"><link rel="prefetch" href="/assets/js/95.46b64b79.js"><link rel="prefetch" href="/assets/js/96.61a9b0b9.js"><link rel="prefetch" href="/assets/js/97.65a03aad.js"><link rel="prefetch" href="/assets/js/98.7aa56ed0.js"><link rel="prefetch" href="/assets/js/99.a652c8d5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.1a6a4f51.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">皮卡车</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/computer/" class="nav-link">
  计算机
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="系统" class="dropdown-title"><span class="title">系统</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/os/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/os/manjaro/" class="nav-link">
  Manjaro
</a></li><li class="dropdown-item"><!----> <a href="/os/ubuntu/" class="nav-link">
  Ubuntu
</a></li><li class="dropdown-item"><!----> <a href="/os/centos/" class="nav-link">
  CentOS
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/frontend/javascript/" class="nav-link router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="https://css.shanyuhai.top/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSS
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/frontend/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/frontend/d3js/" class="nav-link">
  D3
</a></li><li class="dropdown-item"><!----> <a href="/frontend/utils/" class="nav-link">
  Utils
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><span class="title">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/backend/nodejs/" class="nav-link">
  Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/backend/koa/" class="nav-link">
  Koa
</a></li><li class="dropdown-item"><!----> <a href="/backend/mongodb/" class="nav-link">
  MongoDB
</a></li><li class="dropdown-item"><!----> <a href="/backend/nginx/" class="nav-link">
  Nginx
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/tools/github/" class="nav-link">
  Github
</a></li><li class="dropdown-item"><!----> <a href="/tools/vscode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/chrome/" class="nav-link">
  Chrome Developer tools
</a></li><li class="dropdown-item"><!----> <a href="/tools/bookmark-scripts/" class="nav-link">
  Bookmark scripts
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><span class="title">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/more/algorithm/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/more/interview/" class="nav-link">
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/more/hodgepodge/" class="nav-link">
  大杂烩
</a></li><li class="dropdown-item"><!----> <a href="/more/clean/" class="nav-link">
  风格指南
</a></li><li class="dropdown-item"><!----> <a href="https://v1.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VuePress1.x 官网
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JAVASCRIPT</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/" class="sidebar-link">首页</a></li><li><a href="/frontend/javascript/arrow-function.html" class="sidebar-link">箭头函数</a></li><li><a href="/frontend/javascript/can-not-read-property-of-undefined-or-null.html" class="sidebar-link">无法访问 undefined、null 的属性</a></li><li><a href="/frontend/javascript/error.html" class="sidebar-link">Error 类型</a></li><li><a href="/frontend/javascript/function-methods.html" class="sidebar-link">对象的构造函数方法</a></li><li><a href="/frontend/javascript/implicit-coercion.html" class="sidebar-link">隐式转换</a></li><li><a href="/frontend/javascript/invocation-expression.html" class="sidebar-link">调用表达式</a></li><li><a href="/frontend/javascript/invoking-functions.html" class="sidebar-link">函数调用</a></li><li><a href="/frontend/javascript/prototype-chain.html" class="sidebar-link">原型链</a></li><li><a href="/frontend/javascript/resolve-function-call-in-jsx.html" class="sidebar-link">处理 JSX 中函数调用</a></li><li><a href="/frontend/javascript/scope-and-closures.html" class="sidebar-link">作用域与闭包</a></li><li><a href="/frontend/javascript/statements-and-expressions.html" class="sidebar-link">语句和表达式</a></li><li><a href="/frontend/javascript/this-identifier.html" class="sidebar-link">this 关键字</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>对象方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/object-constructor-methods.html" class="sidebar-link">对象的构造函数方法</a></li><li><a href="/frontend/javascript/object-constructor-methods-freeze.html" class="sidebar-link">对象构造函数冻结方法</a></li><li><a href="/frontend/javascript/object-constructor-methods-property.html" class="sidebar-link">对象构造函数属性方法</a></li><li><a href="/frontend/javascript/object-instance-methods.html" class="sidebar-link">对象的实例函数方法</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>数组方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/array.html" class="sidebar-link">数组</a></li><li><a href="/frontend/javascript/array-accessor-methods.html" class="sidebar-link">数组的访问方法</a></li><li><a href="/frontend/javascript/array-iteration-methods.html" class="active sidebar-link">数组的迭代方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-entries" class="sidebar-link">Array.prototype.entries</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-every" class="sidebar-link">Array.prototype.every</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-filter" class="sidebar-link">Array.prototype.filter</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-find" class="sidebar-link">Array.prototype.find</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-findindex" class="sidebar-link">Array.prototype.findIndex</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-foreach" class="sidebar-link">Array.prototype.forEach</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-keys" class="sidebar-link">Array.prototype.keys</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-map" class="sidebar-link">Array.prototype.map</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-reduce" class="sidebar-link">Array.prototype.reduce</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-reduceright" class="sidebar-link">Array.prototype.reduceRight</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-some" class="sidebar-link">Array.prototype.some</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-values" class="sidebar-link">Array.prototype.values</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-flat" class="sidebar-link">Array.prototype.flat</a></li><li class="sidebar-sub-header"><a href="/frontend/javascript/array-iteration-methods.html#array-prototype-flatmap" class="sidebar-link">Array.prototype.flatMap</a></li></ul></li><li><a href="/frontend/javascript/array-mutator-methods.html" class="sidebar-link">数组的修改方法</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>字符串方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/frontend/javascript/string-concat.html" class="sidebar-link">字符串拼接方法</a></li><li><a href="/frontend/javascript/string-format.html" class="sidebar-link">字符串格式化方法</a></li><li><a href="/frontend/javascript/string-query.html" class="sidebar-link">字符串查询方法</a></li><li><a href="/frontend/javascript/string-regexp.html" class="sidebar-link">字符串正则方法</a></li><li><a href="/frontend/javascript/string-substring.html" class="sidebar-link">字符串截取方法</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="array-prototype-entries"><a href="#array-prototype-entries" class="header-anchor">#</a> Array.prototype.entries</h2> <h3 id="_1-语法"><a href="#_1-语法" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.entries()</p></div> <p>返回值：</p> <p>一个新的 Array 迭代器对象。</p> <h3 id="_2-描述"><a href="#_2-描述" class="header-anchor">#</a> 2. 描述</h3> <p><code>entries()</code> 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例"><a href="#_3-示例" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>array iterator</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Array Iterator {}</span>
</code></pre></div></li> <li><p>iterator.next</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Object { value: Array [0, &quot;a&quot;], done: false }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Object { value: Array [1, &quot;b&quot;], done: false }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Object { value: Array [2, &quot;c&quot;], done: false }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Object { value: undefined, done: true }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Object { value: undefined, done: true }</span>
</code></pre></div></li> <li><p>iterating with index and elements</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>index<span class="token punctuation">,</span> element<span class="token punctuation">]</span> <span class="token keyword">of</span> a<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 0 'a' </span>
<span class="token comment">// 1 'b' </span>
<span class="token comment">// 2 'c'</span>
</code></pre></div></li></ul> <h2 id="array-prototype-every"><a href="#array-prototype-every" class="header-anchor">#</a> Array.prototype.every</h2> <h3 id="_1-语法-2"><a href="#_1-语法-2" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.every(callback[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>element：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>返回一个布尔值。</p> <h3 id="_2-描述-2"><a href="#_2-描述-2" class="header-anchor">#</a> 2. 描述</h3> <p><code>every()</code> 方法为数组中的每个元素都执行一次 <code>callback</code> 函数，直到找到一个返回 <code>false</code> 的元素。如果找到一个这样的元素则立即返回 false，否则返回 true。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>多用于判断多种状态是否符合，传递给变量，交由 if 处理。</li></ul></blockquote> <h3 id="_3-示例-2"><a href="#_3-示例-2" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>testing size of all array elements</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isBigEnough</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> element <span class="token operator">&gt;=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isBigEnough<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// false</span>
<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">54</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isBigEnough<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div></li> <li><p>using arrow functions</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">&gt;=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">54</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">&gt;=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div></li></ul> <h2 id="array-prototype-filter"><a href="#array-prototype-filter" class="header-anchor">#</a> Array.prototype.filter</h2> <h3 id="_1-语法-3"><a href="#_1-语法-3" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.filter(callback(element[, index[, array]])[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>element：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>一个新的数组实例。</p> <h3 id="_2-描述-3"><a href="#_2-描述-3" class="header-anchor">#</a> 2. 描述</h3> <p><code>filter()</code> 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 通过回调函数返回 true 的元素会包含到新数组中。<code>filter</code> 遍历的元素范围在第一次调用 <code>callback</code> 时之前就已经确定了，之后添加元素不会被遍历到。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>所有需要被过滤的数据都会使用该方法。</li></ul></blockquote> <h3 id="_3-示例-3"><a href="#_3-示例-3" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>filtering invalid values</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token string">&quot;hi&quot;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">a</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, &quot;2&quot;, {  }, { a: &quot;hi&quot; }]</span>
</code></pre></div></li> <li><p>filtering out all small values</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isBigEnough</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> value <span class="token operator">&gt;=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">130</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>isBigEnough<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [12, 130, 44]</span>
</code></pre></div></li> <li><p>filtering invalid entries from JSON</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">12.2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">NaN</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'undefined'</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> invalidEntries <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">isNumber</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> obj <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'number'</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">filterByID</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNumber</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  invalidEntries<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>filterByID<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Filtered Array [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]</span>
<span class="token comment">//  invalidEntries 5</span>
</code></pre></div></li> <li><p>searching in array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fruits <span class="token operator">=</span>  <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'banana'</span><span class="token punctuation">,</span> <span class="token string">'grapes'</span><span class="token punctuation">,</span> <span class="token string">'mango'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">filterItems</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> query</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> el<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>query<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">filterItems</span><span class="token punctuation">(</span>fruits<span class="token punctuation">,</span> <span class="token string">'ap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['apple', 'grapes']</span>
<span class="token function">filterItems</span><span class="token punctuation">(</span>fruits<span class="token punctuation">,</span> <span class="token string">'an'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['banana', 'mango', 'orange']</span>
</code></pre></div></li></ul> <h2 id="array-prototype-find"><a href="#array-prototype-find" class="header-anchor">#</a> Array.prototype.find</h2> <h3 id="_1-语法-4"><a href="#_1-语法-4" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.find(callback[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>element：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>返回一个满足回调函数的值，否则返回 undefined。</p> <h3 id="_2-描述-4"><a href="#_2-描述-4" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>返回对象组成的数组中的对应对象。</li></ul></blockquote> <h3 id="_3-示例-4"><a href="#_3-示例-4" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>find an object in an array by one of its properties</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> inventory <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'apples'</span><span class="token punctuation">,</span> quantity<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'bananas'</span><span class="token punctuation">,</span> quantity<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'cherries'</span><span class="token punctuation">,</span> quantity<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

inventory<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">fruit</span> <span class="token operator">=&gt;</span> fruit<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'cherries'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  { name: 'cherries', quantity: 5 }</span>
</code></pre></div></li> <li><p>find a prime number in an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isPrime</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> start <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token keyword">while</span> <span class="token punctuation">(</span>start <span class="token operator">&lt;=</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element <span class="token operator">%</span> start<span class="token operator">++</span> <span class="token operator">&lt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> element <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>isPrime<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>isPrime<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5</span>
</code></pre></div></li></ul> <h2 id="array-prototype-findindex"><a href="#array-prototype-findindex" class="header-anchor">#</a> Array.prototype.findIndex</h2> <h3 id="_1-语法-5"><a href="#_1-语法-5" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.findIndex(callback[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>element：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>返回对应值的下标，否则返回 -1。</p> <h3 id="_2-描述-5"><a href="#_2-描述-5" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>较少使用该方法，首先考虑能否使用 includes，若不支持才会考虑该项。</li></ul></blockquote> <h3 id="_3-示例-5"><a href="#_3-示例-5" class="header-anchor">#</a> 3. 示例</h3> <p>参考 find 的<a href="/frontend/javascript/array-methods.html#_3-示例-9">示例</a>即可。</p> <h2 id="array-prototype-foreach"><a href="#array-prototype-foreach" class="header-anchor">#</a> Array.prototype.forEach</h2> <h3 id="_1-语法-6"><a href="#_1-语法-6" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.forEach(callback[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>currentValue：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>undefined。</p> <h3 id="_2-描述-6"><a href="#_2-描述-6" class="header-anchor">#</a> 2. 描述</h3> <p><code>forEach</code> 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或未初始化的项将被跳过（例如稀疏数组）。</p> <p>如之前的方法一致，<code>forEach</code> 遍历的范围在第一次调用 callback 前就会确定。调用 callback 后添加到数组中的项不会被 callback 访问到。但是，如果已经存在的值被改变，则传递给 callback 的值是  <code>forEach</code> 遍历到它们那一刻的值。参见下方示例。</p> <p>你无法终止跳出 <code>forEach</code> 循环，除了抛出一个异常。如果你需要这样做，使用 <code>forEach</code> 方法是错误的，请使用其余循环方法。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li><s>所有使用 for 循环的场景（今天才改正过来……）。</s></li> <li>不需要终止 for 循环的场景。</li></ul></blockquote> <h3 id="_3-示例-6"><a href="#_3-示例-6" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>no opeartion for uninitialized values(sparse arrays)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 跳过无效值</span>
<span class="token keyword">const</span> arraySparse <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> numCallbackRuns <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

arraySparse<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">el</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 1</span>
	<span class="token comment">// 3</span>
	<span class="token comment">// 7</span>
  numCallbackRuns<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;numCallbackRuns: &quot;</span><span class="token punctuation">,</span> numCallbackRuns<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// numCallbackRuns: 3</span>
</code></pre></div></li> <li><p>printing the contents of an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">logArrayElements</span><span class="token punctuation">(</span><span class="token parameter">elements<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'a['</span> <span class="token operator">+</span> index <span class="token operator">+</span> <span class="token string">'] = '</span> <span class="token operator">+</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>logArrayElements<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// a[0] = 2</span>
<span class="token comment">// a[1] = 5</span>
<span class="token comment">// a[3] = 9</span>
</code></pre></div></li> <li><p>using thisArg</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Counter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token class-name">Counter</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">entry</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>sum <span class="token operator">+=</span> entry<span class="token punctuation">;</span>
    <span class="token operator">++</span><span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Counter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>count<span class="token punctuation">;</span>
<span class="token comment">// 3 </span>
obj<span class="token punctuation">.</span>sum<span class="token punctuation">;</span>
<span class="token comment">// 16</span>
</code></pre></div></li> <li><p>an object copy function</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">copy</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> copy <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> propNames <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyNames</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  propNames<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">name</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> desc <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptor</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>copy<span class="token punctuation">,</span> name<span class="token punctuation">,</span> desc<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token keyword">return</span> copy<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token function">copy</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// obj2 looks like obj1 now</span>
</code></pre></div></li> <li><p>if the array is modified during iteration, other elements might be skipped</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> words <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">,</span> <span class="token string">'four'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
words<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">word</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>word<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>word <span class="token operator">===</span> <span class="token string">'two'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    words<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// one</span>
<span class="token comment">// two</span>
<span class="token comment">// four</span>
</code></pre></div></li> <li><p>flatten an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  
  arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">i</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">?</span> result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token function">flatten</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> problem <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">flatten</span><span class="token punctuation">(</span>problem<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 6, 7, 8, 9]</span>
</code></pre></div></li></ul> <h2 id="array-prototype-keys"><a href="#array-prototype-keys" class="header-anchor">#</a> Array.prototype.keys</h2> <h3 id="_1-语法-7"><a href="#_1-语法-7" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.keys()</p></div> <p>返回值：</p> <p>一个新的 Array 迭代器对象。</p> <h3 id="_2-描述-7"><a href="#_2-描述-7" class="header-anchor">#</a> 2. 描述</h3> <p>keys() 方法返回一个包含数组中每个索引键的 Array Iterator 对象。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例-7"><a href="#_3-示例-7" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>key iterator doesn't ignore holes</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> sparseKeys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['0', '2']</span>
<span class="token keyword">const</span> denseKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// [0, 1, 2]</span>
</code></pre></div></li> <li><p>generate an array of the specified length</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">specifiedArray</span> <span class="token operator">=</span> <span class="token parameter">len</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span>len<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token function">specifiedArray</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [0, 1, 2, 3]</span>
</code></pre></div></li></ul> <h2 id="array-prototype-map"><a href="#array-prototype-map" class="header-anchor">#</a> Array.prototype.map</h2> <h3 id="_1-语法-8"><a href="#_1-语法-8" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.map(callback[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>currentValue：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>一个新的数组，每个元素都是回调函数的结果。</p> <h3 id="_2-描述-8"><a href="#_2-描述-8" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>常用于映射修改后端传递的数据。</li></ul></blockquote> <h3 id="_3-示例-8"><a href="#_3-示例-8" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>mapping an array of numbers to an array of square roots</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
numbers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">num</span> <span class="token operator">=&gt;</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3]</span>
</code></pre></div></li> <li><p>using map to reformat objects in an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> kvArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
kvArray<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">obj</span> <span class="token operator">=&gt;</span>  <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">[</span>obj<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token operator">:</span> obj<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [{1: 10}, {2: 20}, {3: 30}]</span>
</code></pre></div></li> <li><p>mapping an array of numbers using a function containing an argument</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
numbers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">num</span> <span class="token operator">=&gt;</span> num <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [2, 8, 18]</span>
</code></pre></div></li> <li><p>using map generically</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> map <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>map<span class="token punctuation">;</span>
<span class="token function">map</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">,</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> x<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]</span>
</code></pre></div></li> <li><p>using map generically querySelectorAll</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> elems <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'select option:checked'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>elems<span class="token punctuation">,</span> <span class="token parameter">obj</span> <span class="token operator">=&gt;</span> obj<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>tricky use case</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;3&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>parseInt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, NaN, NaN]</span>


<span class="token keyword">function</span> <span class="token function">returnInt</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>returnInt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3]</span>
</code></pre></div></li> <li><p>mapping array have undefined</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
numbers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&lt;</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">return</span> num<span class="token punctuation">;</span> <span class="token comment">//  [1, 2, 3, undefined]</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="array-prototype-reduce"><a href="#array-prototype-reduce" class="header-anchor">#</a> Array.prototype.reduce</h2> <h3 id="_1-语法-9"><a href="#_1-语法-9" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])</p></div> <p>参数：</p> <ul><li><p>callback：回调函数；</p> <ul><li>accumulator：累计器累计回调的返回值；</li></ul> <ul><li>currentValue：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li><p>initialValue：作为第一次调用 callback 函数的第一个参数的值，默认值为数组中的第一个元素，空数组会导致报错。</p></li></ul> <p>返回值：</p> <p>函数累计处理的结果。</p> <h3 id="_2-描述-9"><a href="#_2-描述-9" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>累计数据时。</li></ul></blockquote> <h3 id="_3-示例-9"><a href="#_3-示例-9" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>sum all the values of an array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> accumulator <span class="token operator">+</span> currentValue<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
</code></pre></div></li> <li><p>sum of values in an object array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> initialValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">[</span><span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> accumulator <span class="token operator">+</span> currentValue<span class="token punctuation">.</span>x<span class="token punctuation">,</span> initialValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
</code></pre></div></li> <li><p>flatten an array of arrays</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span> <span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> accumulator<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>currentValue<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [0, 1, 2, 3, 4, 5]</span>
</code></pre></div></li> <li><p>counting instances of values in an object</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> names <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Alice'</span><span class="token punctuation">,</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Tiff'</span><span class="token punctuation">,</span> <span class="token string">'Bruce'</span><span class="token punctuation">,</span> <span class="token string">'Alice'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
names<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token parameter">allNames<span class="token punctuation">,</span> name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
  <span class="token keyword">if</span> <span class="token punctuation">(</span>name <span class="token keyword">in</span> allNames<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    allNames<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">else</span> <span class="token punctuation">{</span>
    allNames<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> allNames<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }</span>
</code></pre></div></li> <li><p>grouping objects by a property</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">21</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Max'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Jane'</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> 
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">groupBy</span><span class="token punctuation">(</span><span class="token parameter">objectArray<span class="token punctuation">,</span> property</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> objectArray<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> key <span class="token operator">=</span> obj<span class="token punctuation">[</span>property<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    acc<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> acc<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">groupBy</span><span class="token punctuation">(</span>people<span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// { </span>
<span class="token comment">//   20: [</span>
<span class="token comment">//     { name: 'Max', age: 20 }, </span>
<span class="token comment">//     { name: 'Jane', age: 20 }</span>
<span class="token comment">//   ], </span>
<span class="token comment">//   21: [{ name: 'Alice', age: 21 }] </span>
<span class="token comment">// }</span>
</code></pre></div></li> <li><p>bonding arrays contained in an array of objects using the spread operator and initialValue</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> friends <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Anna'</span><span class="token punctuation">,</span>
  books<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Bible'</span><span class="token punctuation">,</span> <span class="token string">'Harry Potter'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">21</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span>
  books<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'War and peace'</span><span class="token punctuation">,</span> <span class="token string">'Romeo and Juliet'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">26</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span>
  books<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'The Lord of the Rings'</span><span class="token punctuation">,</span> <span class="token string">'The Shining'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

friends<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>accumulator<span class="token punctuation">,</span> <span class="token operator">...</span>currentValue<span class="token punctuation">.</span>books<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Alphabet'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;Alphabet&quot;, &quot;Bible&quot;, &quot;Harry Potter&quot;, &quot;War and peace&quot;, &quot;Romeo and Juliet&quot;, &quot;The Lord of the Rings&quot;, &quot;The Shining&quot;]</span>
</code></pre></div></li> <li><p>remove duplicate items in array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'e'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
myArray<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>accumulator<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>currentValue<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    accumulator<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>currentValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> accumulator<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;e&quot;, &quot;d&quot;]</span>
</code></pre></div></li> <li><p>running promises in sequence</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">runPromiseInSequence</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">promiseChain<span class="token punctuation">,</span> currentFunction</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> promiseChain<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>currentFunction<span class="token punctuation">)</span><span class="token punctuation">,</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// promise function 1</span>
<span class="token keyword">function</span> <span class="token function">p1</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span>a <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// promise function 2</span>
<span class="token keyword">function</span> <span class="token function">p2</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span>a <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// function 3  - will be wrapped in a resolved promise by .then()</span>
<span class="token keyword">function</span> <span class="token function">f3</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">return</span> a <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// promise function 4</span>
<span class="token keyword">function</span> <span class="token function">p4</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span>a <span class="token operator">*</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> promiseArr <span class="token operator">=</span> <span class="token punctuation">[</span>p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> f3<span class="token punctuation">,</span> p4<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token function">runPromiseInSequence</span><span class="token punctuation">(</span>promiseArr<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 1200</span>
</code></pre></div></li> <li><p>function composition enabling piping</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">double</span> <span class="token operator">=</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> x<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">triple</span> <span class="token operator">=</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token number">3</span> <span class="token operator">*</span> x<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">quadruple</span> <span class="token operator">=</span> <span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token number">4</span> <span class="token operator">*</span> x<span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">pipe</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>functions</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token parameter">input</span> <span class="token operator">=&gt;</span> functions<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">fn</span><span class="token punctuation">(</span>acc<span class="token punctuation">)</span><span class="token punctuation">,</span> input<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> multiply6 <span class="token operator">=</span> <span class="token function">pipe</span><span class="token punctuation">(</span>double<span class="token punctuation">,</span> triple<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> multiply9 <span class="token operator">=</span> <span class="token function">pipe</span><span class="token punctuation">(</span>triple<span class="token punctuation">,</span> triple<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> multiply16 <span class="token operator">=</span> <span class="token function">pipe</span><span class="token punctuation">(</span>quadruple<span class="token punctuation">,</span> quadruple<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> multiply24 <span class="token operator">=</span> <span class="token function">pipe</span><span class="token punctuation">(</span>double<span class="token punctuation">,</span> triple<span class="token punctuation">,</span> quadruple<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">multiply6</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 36</span>
<span class="token function">multiply9</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 81</span>
<span class="token function">multiply16</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 256</span>
<span class="token function">multiply24</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 240</span>
</code></pre></div></li></ul> <h2 id="array-prototype-reduceright"><a href="#array-prototype-reduceright" class="header-anchor">#</a> Array.prototype.reduceRight</h2> <h3 id="_1-语法-10"><a href="#_1-语法-10" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.reduceRight(callback[, initialValue])</p></div> <p>参数：</p> <ul><li><p>callback：回调函数；</p> <ul><li><p>previousValue：上一次调用回调的返回值，或提供的 initialValue；</p></li> <li><p>currentValue：当前值；</p></li> <li><p>index：当前值的索引；</p></li> <li><p>array：当前数组。</p></li></ul></li> <li><p>initialValue：作为第一次调用 callback 函数的第一个参数的值，默认值为数组中的第一个元素，空数组会导致报错。</p></li></ul> <p>返回值：</p> <p>函数累计处理的结果。</p> <h3 id="_2-描述-10"><a href="#_2-描述-10" class="header-anchor">#</a> 2. 描述</h3> <p>基本与 reduce 一致，从右到左。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例-10"><a href="#_3-示例-10" class="header-anchor">#</a> 3. 示例</h3> <p>参考 reduce 即可。</p> <h2 id="array-prototype-some"><a href="#array-prototype-some" class="header-anchor">#</a> Array.prototype.some</h2> <h3 id="_1-语法-11"><a href="#_1-语法-11" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.some(callback(element[, index[, array]])[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>element：当前元素；</li> <li>index：当前元素的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 this 值。</li></ul> <p>返回值：</p> <p>如果回调函数返回至少一个数组元素的 truthy 值，则返回 true；否则为 false。</p> <h3 id="_2-描述-11"><a href="#_2-描述-11" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>常用多种元素判断。</li></ul></blockquote> <h3 id="_3-示例-11"><a href="#_3-示例-11" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>testing array elements using arrow functions</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">&gt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div></li> <li><p>checking whether a value exists using an arrow function</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'banana'</span><span class="token punctuation">,</span> <span class="token string">'mango'</span><span class="token punctuation">,</span> <span class="token string">'guava'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">checkAvailability</span><span class="token punctuation">(</span><span class="token parameter">arr<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">arrVal</span> <span class="token operator">=&gt;</span> val <span class="token operator">===</span> arrVal<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">checkAvailability</span><span class="token punctuation">(</span>fruits<span class="token punctuation">,</span> <span class="token string">'kela'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// false</span>
<span class="token function">checkAvailability</span><span class="token punctuation">(</span>fruits<span class="token punctuation">,</span> <span class="token string">'banana'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div></li> <li><p>converting any value to Boolean</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">TRUTHY_VALUES</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">getBoolean</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token string">'use strict'</span><span class="token punctuation">;</span>
  
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    value <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  <span class="token keyword">return</span> <span class="token constant">TRUTHY_VALUES</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">t</span> <span class="token operator">=&gt;</span> t <span class="token operator">===</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">getBoolean</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// false</span>
<span class="token function">getBoolean</span><span class="token punctuation">(</span><span class="token string">'false'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token function">getBoolean</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// true</span>
<span class="token function">getBoolean</span><span class="token punctuation">(</span><span class="token string">'true'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// true</span>
</code></pre></div></li></ul> <h2 id="array-prototype-values"><a href="#array-prototype-values" class="header-anchor">#</a> Array.prototype.values</h2> <h3 id="_1-语法-12"><a href="#_1-语法-12" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.values()</p></div> <p>返回值：</p> <p>返回一个新的 Array Iterator 对象。</p> <h3 id="_2-描述-12"><a href="#_2-描述-12" class="header-anchor">#</a> 2. 描述</h3> <p>描述即返回值。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例-12"><a href="#_3-示例-12" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>iteration using for...of loop</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> iterator <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> letter <span class="token keyword">of</span> iterator<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>letter<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;a&quot; &quot;b&quot; &quot;c&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h2 id="array-prototype-flat"><a href="#array-prototype-flat" class="header-anchor">#</a> Array.prototype.flat</h2> <h3 id="_1-语法-13"><a href="#_1-语法-13" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.flat(depth)</p></div> <p>参数：</p> <ul><li>depth：指定要提取嵌套数组的结构深度，默认值为 1，Infinity 表示无限层级。</li></ul> <p>返回值：</p> <p>一个包含将数组与子数组中所有元素的新数组。</p> <h3 id="_2-描述-13"><a href="#_2-描述-13" class="header-anchor">#</a> 2. 描述</h3> <p><code>flat()</code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。方法很美丽，但是兼容性很差，所以提供了替代方案。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例-13"><a href="#_3-示例-13" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>flattening nested arrays</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// [1, 2, 3, 4]</span>

<span class="token keyword">const</span>  arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, [5, 6]]</span>

<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4, 5, 6]</span>
</code></pre></div></li> <li><p>flattening and array holes</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 4, 5]</span>
</code></pre></div></li></ul> <h3 id="_4-替代方案"><a href="#_4-替代方案" class="header-anchor">#</a> 4. 替代方案</h3> <p>使用 reduce 和 concat：</p> <ul><li><p>flat single level array</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4]</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 4]</span>
</code></pre></div></li> <li><p>enable deep level flatten use recursion with reduce and concat</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">flattenDeep</span><span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">acc<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">?</span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">flattenDeep</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">flattenDeep</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</span>
</code></pre></div></li> <li><p>non recursive flatten deep using a stack</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">flatten</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> stack <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>input<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  
  <span class="token keyword">while</span> <span class="token punctuation">(</span>stack<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> next <span class="token operator">=</span> stack<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>next<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>next<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>next<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  
  <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">flatten</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</span>
</code></pre></div></li></ul> <h2 id="array-prototype-flatmap"><a href="#array-prototype-flatmap" class="header-anchor">#</a> Array.prototype.flatMap</h2> <h3 id="_1-语法-14"><a href="#_1-语法-14" class="header-anchor">#</a> 1. 语法</h3> <div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>arr.flatMap(function callback(currentValue[, index[, array]]) {</p> <p>​	// return element for new_array</p> <p>}[, thisArg])</p></div> <p>参数：</p> <ul><li>callback：回调函数；
<ul><li>currentValue：当前值；</li> <li>index：当前值的索引；</li> <li>array：当前数组。</li></ul></li> <li>thisArg：执行 callback 时使用的 <code>this</code> 值。</li></ul> <p>返回值：</p> <p>一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 <code>depth</code> 值为 1。</p> <h3 id="_2-描述-14"><a href="#_2-描述-14" class="header-anchor">#</a> 2. 描述</h3> <p>相当于执行 <code>map</code> 方法后，对返回值组成的数组执行 <code>flat</code> 方法。</p> <blockquote><p>个人在日常开发中常用场景：</p> <ul><li>尚未使用过。</li></ul></blockquote> <h3 id="_3-示例-14"><a href="#_3-示例-14" class="header-anchor">#</a> 3. 示例</h3> <ul><li><p>map and flatMap</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [[2], [4], [6], [8]]</span>
arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [2, 4, 6, 8]</span>
arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>x <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [[2], [4], [6], [8]]</span>
</code></pre></div></li> <li><p>a list of sentences</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;今天天气不错&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;早上好&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">s</span> <span class="token operator">=&gt;</span> s<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [[&quot;今&quot;, &quot;天&quot;, &quot;天&quot;, &quot;气&quot;, &quot;不&quot;, &quot;错&quot;],[&quot;&quot;],[&quot;早&quot;, &quot;上&quot;, &quot;好&quot;]]</span>

arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">s</span> <span class="token operator">=&gt;</span> s<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [&quot;今&quot;, &quot;天&quot;, &quot;天&quot;, &quot;气&quot;, &quot;不&quot;, &quot;错&quot;, &quot;早&quot;, &quot;上&quot;, &quot;好&quot;]</span>
</code></pre></div></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2020年3月17日星期二下午2点47分</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/frontend/javascript/array-accessor-methods.html" class="prev">
        数组的访问方法
      </a></span> <span class="next"><a href="/frontend/javascript/array-mutator-methods.html">
        数组的修改方法
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.1f0f93c9.js" defer></script><script src="/assets/js/2.f28f3227.js" defer></script><script src="/assets/js/35.5d9dfab1.js" defer></script><script src="/assets/js/3.a7eaa85f.js" defer></script>
  </body>
</html>
